<template>
  <view>
    <uni-search-bar
        v-if="currentTabComponent==='home'||currentTabComponent==='whole'||currentTabComponent==='search'"
        v-model="proName"
        placeholder="搜本店"
        cancelButton="none"
        @focus="openSearch"
        @input="searchItem"
    ></uni-search-bar>
    <uni-row>
      <uni-col :span="3" :push="1">
        <image style="height: 70px;border-radius: 20px" mode="aspectFit"
               :src="this.store.shopLogo"></image>
      </uni-col>
      <uni-col :span="15" :push="2">
        <uni-row>
          <uni-title type="h1" :title="this.store.shopName"></uni-title>
        </uni-row>
        <uni-row>
          <uni-col :span="9">
            <uni-rate v-model="rate" :size="16" activeColor="#e43d33" :max="5" :readonly="true"
                      :allowHalf="true"></uni-rate>
          </uni-col>
          <uni-col :span="15">
            <uni-title style="height: 16px" type="h5" title="23.5万人关注"></uni-title>
          </uni-col>
        </uni-row>
      </uni-col>
      <uni-col :span="5">
        <view style="margin-top: 16px">
          <button style="border-radius: 20px" size="mini" type="warn" class="cuIcon-likefill">关注</button>
        </view>
      </uni-col>
    </uni-row>
    <!--动态组件页面-->
    <component ref="component" :is="currentTabComponent"></component>
    <!--动态组件页面-->
    <view class="grid-square text-center"
          style="z-index: 1;width: 100%;position: fixed;bottom: 0;background-color: #e9e9eb">
      <uni-row>
        <uni-col :span="8" :push="2">
          <view style="width: 70px" :class="currentTabComponent==='home'?'action-item text-red':'action-item'"
                @click="currentTabComponent='home'">
            <view class="cuIcon-home icon"></view>
            <text class="text">首页</text>
          </view>
        </uni-col>
        <uni-col :span="8" :push="1" >
          <view style="width: 70px" :class="currentTabComponent==='whole'?'action-item text-red':'action-item'"
                @click="currentTabComponent='whole'">
            <view class="cuIcon-all icon"></view>
            <text class="text">全部商品</text>
          </view>
        </uni-col>
<!--        <uni-col :span="6">
          <view style="width: 80px" :class="currentTabComponent==='sort'?'action-item text-red':'action-item'"
                @click="currentTabComponent='sort'">
            <view class="cuIcon-sort icon"></view>
            <text class="text">添加商品</text>
          </view>
        </uni-col>-->
        <uni-col :span="8">
          <view style="width: 80px" :class="currentTabComponent==='chat'?'action-item text-red':'action-item'"
                @click="currentTabComponent='chat'">
            <view class="cuIcon-service icon"></view>
            <text class="text">联系客服</text>
          </view>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>

<script>
import UniRow from "../../../../uni_modules/uni-row/components/uni-row/uni-row";
import UniCol from "../../../../uni_modules/uni-row/components/uni-col/uni-col";
import UniTag from "../../../../uni_modules/uni-tag/components/uni-tag/uni-tag";
import UniTitle from "../../../../uni_modules/uni-title/components/uni-title/uni-title";
import home from "@/pages/mine/shop/self_shop/home";
import whole from "@/pages/mine/shop/self_shop/whole";
import sort from "@/pages/mine/shop/self_shop/sort";
import chat from "@/pages/mine/shop/self_shop/chat";
import search from "@/pages/mine/shop/self_shop/search";
import {getShop} from "../../../../api/shop/shop";
import {listProduct, queryByShopId} from "../../../../api/shop/product";
import {getUserProfile} from "../../../../api/system/user";
import {getCustomer} from "../../../../api/shop/customer";

export default {
  components: {UniTitle, UniTag, UniCol, UniRow, home, whole, sort, chat, search},
  data() {
    return {
      //当前登录用户信息
      user: {},
      //店铺客服信息
      customer: {},
      //缓存店铺商品
      productsIndex: [],
      //店铺信息
      store: {},
      //店铺星级测试数据
      rate: 5,
      //商品名称
      proName: "",
      //动态组件
      currentTabComponent: "home",
      //商品搜索参数
      query: {
        shopId: 0,
        pageSize: 10000000,
      }
    }
  },
  //底部菜单点击监控
  watch: {
    currentTabComponent() {
      if (this.currentTabComponent === "home") {
        //刷新首页数据
        this.dataToHome(this.query.shopId);
      }
      if (this.currentTabComponent === "whole") {
        //刷新全部商品页数据
        this.dataToWhole(this.query.shopId);
      }
      if (this.currentTabComponent === "chat") {
        this.$nextTick(function () {
          this.$refs.component.user = this.user;
          this.$refs.component.customer = this.customer;
        });
      }
    },
  },
  //分段器显现
  onPageScroll(e) {
    if (this.currentTabComponent === "home") {
      if (e.scrollTop > 150) {
        this.$refs.component.posit = "segmented";
      } else {
        this.$refs.component.posit = "";
      }
    }
  },
  onLoad: function (option) {
    //缓存店铺Id
    this.query.shopId = option.shopId;
    //获取店铺数据
    getShop(option.shopId).then(res => {
      this.store = res.data;
      //缓存店铺客服信息
      getCustomer(this.store.shopUser).then(res => {
        this.customer = res.data.data.sysUser;
      });
    });
    //向首页发送商品数据
    this.dataToHome(option.shopId);
    //缓存当前登录用户信息
    getUserProfile().then(res => {
      this.user = res.data;
    });
  },
  methods: {
    //打开搜索页
    openSearch() {
      this.currentTabComponent = 'search';
      listProduct(this.query).then(res => {
        this.productsIndex = res.rows;
      });
    },
    //搜索商品
    searchItem(e) {
      this.$refs.component.showProducts = [];
      this.productsIndex.forEach(p => {
        if (e !== '' && p.proName.search(e) !== -1) {
          this.$refs.component.showProducts.push(p);
        }
      });
    },
    //更新首页商品数据
    async dataToHome(shopId) {
      //获取店铺商品
      let pro = await queryByShopId(shopId);
      //传送店铺商品
      this.$refs.component.pros = pro.rows;
      //定制首页分段器
      pro.rows.forEach(e => {
        this.$refs.component.currents.push(e.categoryName)
      })
    },
    async dataToWhole(shopId) {
      let res = await queryByShopId(shopId);
      //发送数据给全部商品
      res.rows.forEach(e => {
        e.products.forEach(f => {
          this.$refs.component.getGoodList.push(f);
        });
      });
    },
  }
}
</script>

<style>
.icon {
  font-size: 28px;
}
</style>
